.ant-menu {
  background-color: transparent;

  .ant-menu-submenu-selected {
    .ant-menu-submenu-title {
      position: relative;

      &::after {
        position: absolute;
        top: 0;
        bottom: 0;
        content: "";
        left: 0;
        border-right: 0;
        border-left: 4px solid var(--menu-active-border);
      }
    }

    .ant-menu-item-selected {
      background-color: unset;
      color: var(--menu-active-color);

      &::after {
        border-left: 0;
      }
    }
  }

  .ant-menu-item {
    height: 52px;
    line-height: 52px;
    margin: 0;
  }

  .ant-menu-item.ant-menu-item-selected {
    background-color: var(--menu-active-bg);

    &::after {
      left: 0;
      border-right: 0;
      border-left: 4px solid var(--menu-active-border);
    }
  }

  .ant-menu-item:active, .ant-menu-submenu-title:active {
    background-color: transparent;
    outline: none;
  }

  .ant-menu-submenu {
    .ant-menu-submenu-title {
      margin-bottom: 0;
    }
  }

  .ant-menu-submenu-title span,
  .ant-menu-item a {
    font-size: 16px;
    color: var(--menu-color);
  }

  .ant-menu-submenu .ant-menu-item a {
    font-size: 14px;
    color: var(--menu-color);
  }

  .ant-menu-item-selected > a,
  .ant-menu-item-selected > a:hover,
  .ant-menu-submenu .ant-menu-item-selected > a,
  .ant-menu-submenu .ant-menu-item-selected > a:hover {
    color: var(--menu-active-color);
  }
}

.ant-menu-submenu > .ant-menu {
  background: transparent;
  color: var(--menu-color);
}


.ant-menu .ant-menu-submenu-selected .ant-menu-submenu-title::after {
  border-left: 0;
}

.ant-menu-submenu-selected {
  color: var(--menu-active-color);
}

.ant-menu-submenu-arrow::before,
.ant-menu-submenu-arrow::after {
  background:  var(--menu-color)!important;
}


.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title  {
  height: 52px;
  line-height: 52px;
}